<template>
	<view class="content-box">
		<DataItem2 clasName="business-item" v-for="(item, i) in list" :key="i" :icon="item.icon" :title="item.title" :val="item.val" :rateName="item.rateName" :rate="item.rate"></DataItem2>
	</view>
</template>
<script setup>
import { ref } from 'vue'
import Head1 from './head1.vue'
import DataItem2 from '@/components/dataItem2/dataItem2.vue'
import { getYesterdayNumApi,getOverTimeApi,getSatisfactionApi } from '@/api/dataStatisticApi.js';
import { getZoneNumber } from '@/api/windowApi.js';
import { useInterval } from '@/utils/hooks';
const activeIndexText = ref('month')
const list = ref([
	{ icon: '/static/index1/banjian1.png', title: '昨日办件', val: '0' ,rate:0},
	{ icon: '/static/index1/banjian2.png', title: '超时办件', val: '0'},
	{ icon: '/static/index1/banjian3.png', title: '满意度', val: '0'},
	{ icon: '/static/index1/banjian4.png', title: '多跑窗口', val: '0'},
])
getYesterdayNumApi().then(res=>{
  list.value[0].val = res.data?.yesterdayNum || 0
  list.value[0].rate = res.data?.change != 'Infinity' ?  ((res.data?.change || 0) * 100).toFixed(2) : res.data.change;
})
getOverTimeApi().then(res=>{
  list.value[1].val = res.data
})
getSatisfactionApi().then(res=>{
  list.value[2].val = res.data.serviceSatisfaction == 1 ? '100%' : ((res.data.serviceSatisfaction * 100).toFixed(2) + '%')
})
const getDuoPao = ()=>{
getZoneNumber({ timeType: activeIndexText.value }).then(res => {
  list.value[3].val  = (res.data || {}).runNum ?? 0
})
}
useInterval(() => {
  getDuoPao();
}, 1000 * 60, { immediate: true })
</script>
<style lang="scss" scoped>
.content-box {
  background: #FFFFFF;
  box-shadow: 0px 3rpx 10rpx 0px rgba(0,0,0,0.1);
  border-radius: 5rpx;
  box-sizing: border-box;
	margin-top: 28rpx;
  display: flex;
	padding: 10rpx 0 10px 22rpx;
	// .banjian-item {
	// 	display: block;
	// 	margin-right: 20rpx;
	// }
}
</style>